<template>
	<view>
		<view class="client_detail-avatar-wrap fillx fccc bsp10">
			<image class="client_detail-avatar" src="@/static/logo_abf.png" mode="scaleToFill"></image>
			<view class="client_detail-messsage fillx fccc bsp10">
				<text>{{name}}</text>
				<view class="client_detail-progress_bar frcc">
					<u-line-progress :height="15" active-color="#00ffff" inactive-color="#797979" :striped="true" :percent="level_progress" :striped-active="true" :show-percent="false"></u-line-progress>
					<text class="client_detail-progress_level">{{progress_level}}</text>
				</view>
				<text>{{progress_number}}</text>
			</view>
		</view>
		<view class="client_detail-other">
			<view class="client_detail-other-item fillx bsp10 t-bb-u" v-for="item in otherShowList" :key="item.name">
				<u-section :title="item.name" sub-title="" :show-line="false" :bold="true" color="#b3b3b3"></u-section>
				<view class="client_detail-other-item-message ha frcc">
					{{item.message}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					name:'张三',
					progress_number:9244,
					progress_level:'县',
					otherShowList:[
						{name:'电话',message:'13680302600',ishave_more:true},
						{name:'订单',message:'12',ishave_more:true},
						{name:'客户',message:'12',ishave_more:true},
						{name:'邀请人',message:'李四',ishave_more:true}
					]
				}
			},
		methods: {
			
		},
		computed:{
			level_progress(){
				//假设1星 0~99
				//假设2星 100~499
				//假设3星 500~999
				//假设县  1000~9999
				//假设市  10000~99999
				//假设省  MAX
				let n=this.progress_number
				let l=this.progress_level
				if(n>0 && n<100){
					this.progress_level='1星'
					return (n/100).toFixed(2)*100
				}else if(n>=100 && n<500){
					this.progress_level='2星'
					return (n/500).toFixed(2)*100
				}else if(n>=500 && n<1000){
					this.progress_level='3星'
					return (n/1000).toFixed(2)*100
				}else if(n>=1000 && n<10000){
					this.progress_level='县'
					return (n/10000).toFixed(2)*100
				}else if(n>=10000 && n<100000){
					this.progress_level='市'
					return (n/100000).toFixed(2)*100
				}else{
					this.progress_level='省'
					return 100
				}
				
			}
		}
	}
</script>

<style>
	.client_detail-avatar-wrap{
		padding: 20rpx 0;
		background-color: #e83e41;
		color: white;
	}
	.client_detail-messsage{
	}
	.client_detail-avatar{
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}
	.client_detail-progress_bar{
		width: 30%;
		position: relative;
	}
	.client_detail-progress_level{
		position: absolute;
		right: -60rpx;
	}
	.client_detail-other-item{
		padding: 40rpx 20rpx;
		position: relative;
	}
	.client_detail-other-item-message{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.client_detail-other-item:nth-child(2)>.client_detail-other-item-message,
	.client_detail-other-item:nth-child(3)>.client_detail-other-item-message{
		color: #e83e41;
		font-weight: bold;
	}
	.client_detail-other-item:nth-child(4)>.client_detail-other-item-message{
		font-size: 30rpx;
	}
</style>
